<template>
  <el-card shadow="never" class="header">
    <div>规则名称：{{ info.title }}</div>
    <div>创建人：{{ info.created_name }}</div>
    <div>创建时间：{{ info.created_at }}</div>
  </el-card>
</template>
<script setup lang="ts">
  import { withDefaults, defineProps } from 'vue'
  interface Props {
    info: any
  }
  withDefaults(defineProps<Props>(), {
    info: () => {
      return {
        title: '',
        created_name: '',
        created_at: ''
      }
    }
  })
</script>
<style lang="scss" scoped>
  .header {
    margin-bottom: 16px;
    :deep(.el-card__body) {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 20px;
      font-size: 14px;
      line-height: 30px;
    }
  }
</style>
